<!--
 * @Author: Chuckie
 * @Email: chuckie@aliyun.com
 * @Date: 2022-11-10 14:35:49
 * @LastEditTime: 2022-11-12 14:32:09
 * @Description: 
 * @FilePath: /zl-web/src/views/basic/enterprise/detail.vue
 *  
-->
<template>
  <div class="app-container">
    <el-form :model="state.form" label-width="120px">

      <el-form-item :label="$t('role.table.roleName')">
        <el-input v-model="state.form.roleName" />
      </el-form-item>
   
      <el-form-item :label="$t('role.table.enabled')">
        <el-switch v-model="state.form.enable" />
      </el-form-item>


      <el-form-item :label="$t('role.table.roleCode')">
        <el-input v-model="state.form.roleCode" />
      </el-form-item>


      <el-form-item :label="$t('sysDictInfo.search.type')">
        <el-select v-model="state.form.type">
          <el-option  v-for="(value, key) in state.dictRoleType" :key=key :label=value :value=key />
        </el-select> 
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="onSubmit">{{$t('common.button.save')}}</el-button>
        <el-button @click="onCancel">{{$t('common.button.back')}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { create, selectOne, update } from './api/base-role'
import {selectByTypeCode } from './api/dict-info'
const route = useRoute()
const router = useRouter()

const { proxy }: any = getCurrentInstance()
const state = reactive({
  form: {
    roleName: "",
    createBy: "",
    modifyBy: "",
    gmtCreate: "",
    gmtModify: "",
    enable: "",
    roleCode: "",
    type: "",
  },
  dictProvince: { "0": "" },
  dictCity: { "0": "" },
  dictDistrict: { "0": "" },
  cities: <any>[],
  district: <any>[],
  dictCountry: {},
  dictRoleType:{ },
})

const onCancel = () => {
  router.back()
}

const onSubmit = async () => {
  if (route.params.id) {
    const data = await update(state.form)
    proxy.$message({ message: proxy.$t('common.message.editSuccessfully'), type: 'success' })
  } else {
    const data = await create(state.form)
    proxy.$message({ message: proxy.$t('common.message.saveSuccessfully'), type: 'success' })
    state.form.roleName= "";
    state.form.createBy= "";
    state.form.modifyBy= "";
    state.form.gmtCreate= "";
    state.form.gmtModify= "";
    state.form.enable= "";
    state.form.roleCode= "";
    state.form.type= "" 
  }
  router.back()
}

const onSelectOne = async (id: string) => {
  const data = await selectOne(id)
  state.form = { ...data.data }
}
  
const selectRoleType = async () => {
  const data = await selectByTypeCode("role")
  const roleType = {}
  data.data.forEach(ele=>{
    roleType[ele.code] = ele.name
  })
  state.dictRoleType = { ...roleType }
}
  

onMounted(() => {
  selectRoleType();

  route.params.id && !Array.isArray(route.params.id) && onSelectOne(route.params.id)
})

</script>

<style lang="scss" scoped>
.el-input {
  width: 300px;
}

.el-select {
  width: 300px;
}

.el-textarea {
  width: 300px;
}
</style>
